<!DOCTYPE html>
<html>
<head>
    <title>代码生成器</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css"/>

    <link rel="stylesheet" href="css/main.css">

</head>
<body>

<div id="app">
    <div class="grid-btn">
        <div class="row ">
            <div class="col col-lg-4">
                <div class="form-group ">
                    <input type="text" class="form-control" v-model="searchName" @keyup.enter="handleQuery" placeholder="表名">
                </div>
            </div>
            <div class="col-md-auto">
                <button type="button" class="btn btn-primary btn-sm" @click="handleQuery">查询</button>
                <button type="button" class="btn btn-primary btn-sm" @click="generator">
                    <i class="fa fa-file-code-o"></i>&nbsp;生成代码
                </button>
              <button type="button" class="btn btn-primary btn-sm" @click="genDoc">
                <i class="fa fa-file-code-o"></i>&nbsp;生成文档
              </button>
            </div>
        </div>
        <div class="row" style=" min-height: 540px;">
            <table class="table table-hover table-success">
                <thead class="thead-default">
                <tr>
                    <th><input type="checkbox" v-model="checkedAll" @change="checkChangedAll"></th>
                    <th>序号</th>
                    <th>表名</th>
                    <th>Engine</th>
                    <th>表备注</th>
                    <th>创建时间</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(facility,index) in tableData">
                    <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
                    <td>{{index+1}}</td>
                    <td>{{facility.tableName}}</td>
                    <td>{{facility.engine}}</td>
                    <td>{{facility.tableComment}}</td>
                    <td>{{facility.createTime}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <div v-show="pagination.count > 1">
                <ul class="pagination justify-content-center">

                    <li class="page-item">
                        <button class="page-link" aria-label="Previous" @click="showPagePre">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </button>
                    </li>

                    <li class="page-item" v-bind:class="{ active: page == pagination.index }"
                        v-for="page in pageItemArr">
                        <button class="page-link" @click="showPage(page)">{{page}}</button>
                    </li>

                    <li class="page-item">
                        <button class="page-link" href="#" aria-label="Next" @click="showPageNext">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </button>
                    </li>

                </ul>

            </div>

        </div>

    </div>
</div>

</body>

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script >
let app = new Vue({
    el:'#app',
    data:{
      searchName: '',
      tableData: [],
      pageItemArr: [],
      pagination: {
        index: 1,
        limit: 10, // limit item size in a page
        size: 10, // current item size in a page
        count: 5, // page count
      },
      checkedAll: false,
      checkedRows: [],
    },
    mounted: function () {
      this.getPage()
    },
    methods: {
      handleQuery: function () {
        this.pagination.index = 1
        this.getPage()
      },
      getPage: function () {
        this.checkedRows = []
        let _self = this
        let url = 'sys/generator/list?page=' + this.pagination.index + '&limit=' + this.pagination.limit
        if (this.searchName.length > 1) {
          url = url + '&tableName=' + this.searchName
        }
        $.get(url, function (data) {
          _self.tableData = data.list
          let page_count = data.totalPage
          _self.pagination.count = page_count
          if (page_count > 1) {
            _self.pageItemArr = []
            for (let i = 1; i <= page_count; i++) {
              _self.pageItemArr.push(i)
            }
          }
        })
      },
      showPage: function (page) {
        this.pagination.index = page
        this.getPage()
      },
      showPagePre: function () {
        if (this.pagination.index === 1) return
        this.pagination.index = this.pagination.index - 1
        this.getPage()
      },
      showPageNext: function () {
        if (this.pagination.index === this.pagination.count) return
        this.pagination.index = this.pagination.index + 1
        this.getPage()
      },
      checkChangedAll: function () {
        console.log('checkAll', this.checkedAll)
        if (this.checkedAll) {
          this.checkedRows = []
          let len = this.tableData.length
          for (let i=0;i<len;i++) {
            this.checkedRows .push(i)
          }
        } else {
          this.checkedRows = []
        }
      },
      getSelectedRows: function () {
        if (this.checkedRows.length < 1) {
          return null
        }
        console.log(this.checkedRows)
        let tables = []
        for (let i of this.checkedRows) {
          tables.push(this.tableData[i].tableName)
        }
        return tables
      },
      generator: function() {
        let tableNames = this.getSelectedRows();
        if(tableNames == null){
          return ;
        }
        location.href = "sys/generator/code?tables=" + tableNames.toString();
      },
      genDoc: function() {
        location.href = "sys/generator/db_docs";
      },
    }
  });
</script>

</html>
